![[Auth0] Route 53+ACM+CloudFrontでAuth0にカスタムドメインとリバースプロキシを設定してみた](https://images.ctfassets.net/ct0aopd36mqt/wp-thumbnail-e37cf03c5caac969de0f633e4738977d/1862834d1806cb03b64a8000a5a1a39e/Auth0ByOkta.jpg)
[Auth0] Route 53+ACM+CloudFrontでAuth0にカスタムドメインとリバースプロキシを設定してみた
2024.10.29こんにちは。
ゲームソリューション部の西川です。
Amazon Route 53（以下、Route 53）+AWS Certificate Manager（以下、ACM）+CloudFrontを利用してAuth0にリバースプロキシを設定してみました。
Auth0ではカスタムドメインを利用できますが、自己管理している証明書を利用したい場合は、リバースプロキシを設定する必要があります。
また、Auth0に対してリバースプロキシを設定するメリットとしては、自己管理している証明書を利用できるだけでなく、キャッシュによる流量の調整や、ログイン前の任意の処理の導入などが挙げられます。
今回は、Route 53でドメインの取得後、ACMで証明書の発行、CloudFrontでAuth0にリバースプロキシの設定を行なっていきます。
ドメイン取得からCloudFrontディストリビューションの作成までについては、下記DevelopersIOの記事を参考にさせていただきました。
Route 53でドメインの取得
まずは、ドメインの取得を行います。
Route 53のダッシュボードから「開始」を押下します。
「ドメインを登録」を選択し、「開始する」を押下します。
ドメインを入力後、任意のトップドメインを選択し、「チェックアウトに進む」を押下します。
今回はRoute 53で使用できるトップドメインの中で一番料金の安い「.click」を選択しました。
契約の期間などを入力します。
今回は検証用なので、1年とし、自動更新もオフにしております。
連絡先を入力して、「次へ」を押下します。
入力したメールアドレスに、検証の前に確認のメールが届くので使用できるメールアドレスを入力できるように注意。
確認して問題なければ「送信」を押下します。
確認メールを受信したことを確認後、URLを押下します。
成功の旨のメッセージが表示されます。
数分待機すると、コンソール画面からドメインのリクエスト欄が成功に変化しています。
ホストゾーンの設定も自動でされます。
以上でドメインの取得が完了しました。
ACMで証明書の発行
続いて、ACMで証明書の発行を行います。
ACMの画面より「開始する」を押下します。
ドメイン名などを入力して「リクエスト」を押下します。
証明書が保留中になっていることが確認できます。
証明書の詳細に移動し、「Route 53でレコードの作成」を押下します。
そのまま「レコードの作成」を押下します。
レコードの作成が完了しました。
証明書が「発行済み」となっていました。
以上で証明書の発行が完了しました。
続いて、Auth0の設定および、CloudFrontの設定を行います。
下記公式ドキュメントを参考にしております。
Auth0とCloudFrontの作成
Custom Dmainの設定画面で、上記で作成したドメインを利用して入力します。
また、今回はセルフマネージドの証明書を利用するので、Certificate TypeはSelf-managed certificateを選択します。
セルフマネージドの証明書の設定を行うにはエンタープライズプランへの加入が必要なため注意してください。
認証を行う画面に遷移するので、TXT RecordとTXT Contentをコピーしておきます。
Route 53に戻り、レコード名にTXT Recordの内容を入力します。
レコードタイプはTXTを選択します。
値にTXT Contentの内容を入力します。
Auth0の画面に戻りVerifyを押下すると、以下のようにOrigin Domain NameやHeaderの値としてNameとValueが表示されるので、コピーしておきます。
続いて、CloudFrontの画面に行き、ディストリビューションを作成していきます。
Origin domainに上記で取得したOrigin Domain Nameの値を入れます。
プロトコルはHTTPSを選択します。
カスタムヘッダーにも上記で取得したNameとValueを入力します。
代替ドメイン名に、カスタムドメインに設定した値を入力します。
SSL証明書には先ほどACMで作成した証明書を選択します。
ビューワープロトコルポリシーはRedirect HTTP to HTTPSを選択します。
許可されたHTTPメソッドはGET, HEAD, OPTIONS, PUT, POST, PATCH, DELETEを選択します。
キャッシュキーとオリジンリクエストでは、Legacy cache settingsを選択します。
設定はそれぞれ以下のように設定してください。
設定をした後、作成を押下するとディストリビューションが作成されました。
続いて、Route 53に戻り、CNAMEレコードを作成します。
レコード名はカスタムドメインの値を入力します。
レコードタイプはCNAMEを選択します。
値はディストリビューションのドメイン名を入力します。
動作確認
チュートリアルにて作成したアプリケーションの設定値を変更してログイン画面を開きます。
問題なく開けることが確認できました。
nslookupを使用してCNAMEがcloudfront経由になっていることも確認できました。
さいごに
以上でカスタムドメインとリバースプロキシの設定ができました。
CloudFrontをリバースプロキシとして導入することにより、Auth0のAPIを実行する際にキャッシュの設定や任意の処理を挟み込むなど、いろいろなカスタマイズを行うことができるかと思います。
以上、Auth0を利用している方、利用の検討をしている方のご参考になっていれば幸いです。
